<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="发布大厅" name="first" id="bb">
      <el-form id="aaaaa">
      <el-form-item label="需求类型" :lable-width="auto">
        <el-select v-model="value" placeholder="请选择">
          <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="需求详细描述" :lable-width="formLabelWidth">
        <el-input type="textarea" :rows="2" placeholder="请输入需求描述" v-model="textarea"></el-input>
      </el-form-item>
      <el-form-item label="地点" :lable-width="formLabelWidth">
        <el-input type="input" placeholder="请输入地点"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" :lable-width="formLabelWidth">
        <el-input type="input" placeholder="请输入电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="还有什么要补充的吗？"> <el-button slot="reference" type="danger" round @click="submitneed">确认上传</el-button></el-popconfirm>
      </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="帮助大厅" name="second">
      <div id="b">
        <div style="position: absolute;top: 40px;padding-top: 20px; right: 50%; font-size: 50px; font-weight: bold" id="bbb">校  园  帮  帮</div>
      </div>
      <div id="bbbb">
      <el-form v-for>
        <el-form-item label="求助人学号:"></el-form-item>
        <el-form-item label="求助类型:"></el-form-item>
        <el-form-item label="联系电话:"></el-form-item>
        <el-form-item label="需求描述:"></el-form-item>
        <el-form-item id="bbbbb">
          <el-button el-button type="danger" plain @click="submitpls" :loading="loginLoading" icon="el-icon-mouse">帮助他</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="我的求助" name="third" id="aa">
      <div id="bbbbbb">
      <el-form>
        <el-form-item label="求助类型:"></el-form-item>
        <el-form-item label="联系电话:"></el-form-item>
        <el-form-item label="需求描述:"></el-form-item>
        <el-form-item id="bbbbb">
          <el-button el-button type="danger" plain @click="cancel" :loading="loginLoading" icon="el-icon-delete">取消</el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="个人界面" name="fourth">
      
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: 'first',
        options: [{
          value: '选项1',
          label: '约会聚餐'
        }, {
          value: '选项2',
          label: '旧物出售'
        }, {
          value: '选项3',
          label: '课程辅导'
        }, {
          value: '选项4',
          label: '信息咨询'
        }, {
          value: '选项5',
          label: '其他需求'
        }],
        value:'',
        textarea: ''
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style scoped>
#aaaaa{
  border-radius: 60px;
  background-clip: padding-box;
  margin: 160px auto;
  width: 600px;
  padding: 35px 35px 15px 35px;
  background-color: rgb(247, 247, 247);
  border: 2px solid #f38d74;
  box-shadow: 0 0 25px #ec6666;
  text-align:center;
  height: auto;
}
#b{
  background:url("../assets/HelpMall.png");
  width:100%;
  height:20%;
  position:fixed;
  background-size:100% 100%;
}
#bb{
  background:url("../assets/login_bg.png");
  width:100%;	
  height:100%;			
  position:fixed;
  background-size:100% 100%;
}
#bbb{
  color:aliceblue;
  text-align: center;
}
#bbbb{
  border-radius: 30px;
  background-color: rgb(243, 233, 227);
  width: 250px;
  height: 400px;
  border: 2px solid #f38d74;
  position:fixed;
  margin: 200px auto;
}
#bbbbb{
  text-align: center;
  margin: 110px auto;
}
#bbbbbb{
  border-radius: 30px;
  background-color: rgb(243, 233, 227);
  width: 250px;
  height: 400px;
  border: 2px solid #f38d74;
  position:fixed;
  margin:auto;
}
#aa{
  background:url("../assets/beijingtupian.jpg");
  width:100%;	
  height:100%;			
  position:fixed;
  background-size:100% 100%;
}
</style>